/* pages/activity/activity.wxss */

.nav {
  display: flex;
  gap: 48rpx;
  align-items: center;
  background-color: #ffffff;
  height: 120rpx;
  width: 100%;
  padding: 0 32rpx;
  box-sizing: border-box;
  .tab-item {
    position: relative;
    color: #222;
    font-size: 30rpx;
    &.active {
      color: #222;
      font-weight: bold;
      font-size: 36rpx;
      background-image: linear-gradient(to top, rgba(88, 218, 115, .65) 40%, #ffffff 40%);
    }

    .decoration-image {
      position: absolute;
      bottom: -20rpx;
      left: 0;
      width: 170rpx;
      height: 36rpx;
      animation: active 150ms ease-in;
    }
  }
}


.container { 
  box-sizing: border-box;
  padding: 0 30rpx;
  width: 100vw;
}

.submit-button {
  position: absolute;
  left: 50%;
  bottom: 160rpx;
  transform: translate3d(-50%, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 288rpx;
  height: 72rpx;
  border-radius: 48rpx;
  font-size: 26rpx;
  padding: 0 40rpx;
  color: #222222;
  background-image: linear-gradient(to bottom, rgba(88, 218, 115, 0), rgba(88, 218, 115, 0.25));
  transform-origin: 0 50%;
  animation: breathe 3s linear infinite;
  box-sizing: border-box;
  border: 1px solid #ffffff;
  .submit-icon {
    width: 40rpx;
    height: 40rpx;
    gap: 10rpx;
  }
}

@keyframes breathe {
  0% {
    transform: scale(0.95) translate3d(-50%, 0, 0);
  }
  50% {
    transform: scale(1) translate3d(-50%, 0, 0);
  }
  100% {
    transform: scale(0.95) translate3d(-50%, 0, 0);
  }
}

@keyframes active {
  from {
    opacity: 0;
    transform: translate3d(-30rpx, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}